<template>
  <div>
    <button v-on:click="fn">点击</button>
    <button @click="fn">点击2</button>
    <button @click="huaMoney(30000)">22222元</button>
    <button @click="huaMoney(40000)">333333元</button>
    <button @click="huaMoney(50000)">4444444元</button>
    <div @click="divClick" style="width:200px;height:200px;border:1px solid red">
      <button @click="innerClick($event,100)">内层的button</button>
    </div>

  </div>
</template>
<script>
// v-on指令用于绑定事件
// 1.基本用法 <div v-on:事件名称='事件函数'></div>
// 2.简写用法 <div @事件名称='事件函数'></div>
// 3.事件传参 
export default {
  name: 'on-compontent',
  methods: {
    fn() {
      console.log('事件触发了')
    },
    huaMoney(money){
      console.log('花了'+ money +'元')
    },
    divClick() {
      console.log('div点击了')
    },
    innerClick(e,num) {
      e.stopPropagation()
      console.log('内层的button被点击了')
    }
  }
}
</script>